import { Outlet, useNavigate } from "react-router-dom"
import  { useState } from 'react';
import { Space, Table } from 'antd';
import type { TableProps } from 'antd';

import type { FormProps } from 'antd';
import { Button,  Form, Input,Drawer } from 'antd';
import { Pagination } from 'antd';

import type { PopconfirmProps } from 'antd';
import {  message, Popconfirm } from 'antd';
import { Radio } from 'antd';
import { Select } from 'antd';
function Index() {
   const nav=useNavigate()
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
    
  };

  const onClose = () => {
    setOpen(false);
  };
    
    type FieldType = {
        username?: string;
        sex?: string;
        name?: string;
        num?: string;
        email?: string;
        
        state?: string;
        password?: string;
        remember?: string;
      };
      
      const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
      };
      
      const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
        
      }
      const confirm: PopconfirmProps['onConfirm'] = (e) => {
        console.log(e);
        message.success('Click on Yes');
        alert('删除成功')
      };
      
      const cancel: PopconfirmProps['onCancel'] = (e) => {
        console.log(e);
        message.error('Click on No');
      };
      
      const columns: TableProps<DataType>['columns'] = [
        {
            
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: '用户名',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },
      
        {
          title: '操作',
          key: 'action',
          render: ( ) => (
            <Space size="middle">
              <Button type="primary" onClick={showDrawer}>
        编辑
      </Button>
      {/* 编辑抽屉 */}
      <Drawer
        title="编辑用户"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
       {/* 抽屉 */}
       <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
{/* 用户名 */}
    <Form.Item<FieldType>
      label="用户名"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    {/* 性别 */}
    <Form.Item<FieldType>
      label="性别"
      name="sex"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
       <Radio.Group
    name="radiogroup"
    defaultValue={1}
    options={[
      { value: 1, label: '男' },
      { value: 2, label: '女' },
   
    ]}
  />
  </Form.Item>
  {/* 昵称 */}
  <Form.Item<FieldType>
      label="昵称"
      name="name"
      
    >
      <Input />
    </Form.Item>
    {/* 手机号 */}
    <Form.Item<FieldType>
      label="手机号"
      name="num"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
  {/* 邮箱 */}
    <Form.Item<FieldType>
      label="邮箱"
      name="email"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    {/* 用户状态 */}
    <Form.Item<FieldType>
      label="用户状态"
      name="state"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
       <Radio.Group
    name="radiogroup"
    defaultValue={1}
    options={[
      { value: 1, label: '启用' },
      { value: 2, label: '禁用' },
   
    ]}
  />
  </Form.Item>
   {/* 用户角色 */}
   <Form.Item<FieldType>
      label="用户角色"
      name="state"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Select
    showSearch
    placeholder="Select a person"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: 'Jack' },
      { value: '2', label: 'Lucy' },
      { value: '3', label: 'Tom' },
    ]}
  />
    </Form.Item>

    <Form.Item label={null}>
    <Button type="primary" htmlType="submit" style={{margin:'10px'}}>
        确认
      </Button>
      <Button type="primary" htmlType="submit" style={{margin:'10px'}}>
        取消
      </Button>
    </Form.Item>
  </Form>
      </Drawer>
              <Popconfirm
    title="删除确认框"
    description="你确定要删除吗"
    onConfirm={confirm}
    onCancel={cancel}
    okText="是的"
    cancelText="取消"
  >
 <Button>删除</Button>
  </Popconfirm>
              
            </Space>
          ),
        },
      ];
      
      const data: DataType[] = [
        {
          key: '1',
          name: 'Joe Black',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Joe Black',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 16,
          address: 'Sydney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
        {
            key: '4',
            name: 'Joe Black',
            age: 12,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '5',
            name: 'Joe Black',
            age: 19,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '6',
            name: 'Tom',
            age: 18,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '7',
            name: 'Tom',
            age: 28,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '8',
            name: 'Tom',
            age: 28,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '9',
            name: 'Tom',
            age: 28,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '10',
            name: 'Anny',
            age: 28,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '11',
            name: 'Tom',
            age: 22,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
          {
            key: '12',
            name: 'Jom',
            age: 23,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
          },
      ];
      const re=()=>{
        nav('/home')
      }
  return (
    <div>
         <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 1200 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
    layout="inline"
    
  >
    <Form.Item<FieldType>
      label="用户名"
      name="username"
     
    >
      <Input />
    </Form.Item>
    <Form.Item<FieldType>
      label="性别"
      name="sex"
    
    >
           <Select
    showSearch
    placeholder="请选择性别"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '男' },
      { value: '2', label: '女' },
    
    ]}
  />
    </Form.Item>
    <Form.Item<FieldType>
      label="昵称"
      name="name"
      
    >
      <Input />
    </Form.Item>
    <Form.Item<FieldType>
      label="手机号"
      name="num"
    
    >
      <Input />
    </Form.Item>
   
    <Form.Item<FieldType>
      label="邮箱"
      name="email"
 
    >
      <Input />
    </Form.Item>
    <Form.Item<FieldType>
      label="用户状态"
      name="state"
     
    >
     <Select
    showSearch
    placeholder="请选择用户状态"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '启用' },
      { value: '2', label: '禁用' },
     
    ]}
  />
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit" onClick={()=>re}>
        重置
      </Button>
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        搜索
      </Button>
    </Form.Item>
  </Form>
  {/* 新增、批量删除 */}
  <div  style={{marginLeft:'1000px'}}>
  <Button type="primary" onClick={showDrawer}>
        新增
      </Button>
  <Drawer
        // title="新增用户"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
       {/* 抽屉 */}
       <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
{/* 用户名 */}
    <Form.Item<FieldType>
      label="用户名"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    {/* 性别 */}
    <Form.Item<FieldType>
      label="性别"
      name="sex"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
       <Radio.Group
    name="radiogroup"
    defaultValue={1}
    options={[
      { value: 1, label: '男' },
      { value: 2, label: '女' },
   
    ]}
  />
  </Form.Item>
  {/* 昵称 */}
  <Form.Item<FieldType>
      label="昵称"
      name="name"
      
    >
      <Input />
    </Form.Item>
    {/* 手机号 */}
    <Form.Item<FieldType>
      label="手机号"
      name="num"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
  {/* 邮箱 */}
    <Form.Item<FieldType>
      label="邮箱"
      name="email"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    {/* 用户状态 */}
    <Form.Item<FieldType>
      label="用户状态"
      name="state"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
       <Radio.Group
    name="radiogroup"
    defaultValue={1}
    options={[
      { value: 1, label: '启用' },
      { value: 2, label: '禁用' },
   
    ]}
  />
  </Form.Item>
   {/* 用户角色 */}
   <Form.Item<FieldType>
      label="用户角色"
      name="state"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Select
    showSearch
    placeholder="Select a person"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: 'Jack' },
      { value: '2', label: 'Lucy' },
      { value: '3', label: 'Tom' },
    ]}
  />
    </Form.Item>

    <Form.Item label={null}>
    <Button type="primary" htmlType="submit" style={{margin:'10px'}}>
        确认
      </Button>
      <Button type="primary" htmlType="submit" style={{margin:'10px'}}>
        取消
      </Button>
    </Form.Item>
  </Form>
      </Drawer>
      {/* 新增抽屉 */}
      <Drawer
        //  title="新增用户"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
       {/* 抽屉 */}
       <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
{/* 用户名 */}
    <Form.Item<FieldType>
      label="用户名"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    {/* 性别 */}
    <Form.Item<FieldType>
      label="性别"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
       <Radio.Group
    name="radiogroup"
    defaultValue={1}
    options={[
      { value: 1, label: '男' },
      { value: 2, label: '女' },
   
    ]}
  />
  </Form.Item>
  {/* 昵称 */}
  <Form.Item<FieldType>
      label="昵称"
      name="username"
      
    >
      <Input />
    </Form.Item>
    {/* 手机号 */}
    <Form.Item<FieldType>
      label="手机号"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
  {/* 邮箱 */}
    <Form.Item<FieldType>
      label="邮箱"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    {/* 用户状态 */}
    <Form.Item<FieldType>
      label="用户状态"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
       <Radio.Group
    name="radiogroup"
    defaultValue={1}
    options={[
      { value: 1, label: '启用' },
      { value: 2, label: '禁用' },
   
    ]}
  />
  </Form.Item>
   {/* 用户角色 */}
   <Form.Item<FieldType>
      label="用户角色"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Select
    showSearch
    placeholder="Select a person"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: 'Jack' },
      { value: '2', label: 'Lucy' },
      { value: '3', label: 'Tom' },
    ]}
  />
    </Form.Item>

    <Form.Item label={null}>
    <Button type="primary" htmlType="submit" style={{margin:'10px'}}>
        确认
      </Button>
      <Button type="primary" htmlType="submit" style={{margin:'10px'}}>
        取消
      </Button>
    </Form.Item>
  </Form>
      </Drawer>
<Button>批量删除</Button>
  
<Select
    showSearch
    placeholder="列设置"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '1' },
      { value: '2', label: '2' },
      { value: '3', label: '3' },
    ]}
  />
  </div>
  
      <Table<DataType> columns={columns} dataSource={data} >
        
      </Table>
      <Pagination
    total={85}
    showSizeChanger
    showQuickJumper
    showTotal={(total) => `Total ${total} items`}
  />
      <Outlet></Outlet>
    </div>
  )
}

export default Index
